<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="story" style="width: 600px;border: solid;">
        <h1 align=" center">我爱的古诗</h1>
        <div align="center" style="background-color:gray">
            <input type="text" v-bind:value="poetry[0].value"><button id="show" type="button"
                @click="flag=!flag">{{flag?"关闭":"展开"}}</button>
        </div>
        <div v-show="flag" v-for=" s in poetry" :key="s.name">
            {{s.value}}
        </div>

    </div>

    <script>
        new Vue({
            el: "#story",
            data: {
                flag: false,
                poetry: [{ "name": "0", "value": "《梦游天姥吟留别》" },
                { "name": "1", "value": "海客谈瀛洲，烟涛微茫信难求，越人语天姥，云霞明灭或可睹。" }, {
                    "name": "2"
                    , "value": "天姥连天向天横，势拔五岳掩赤城。天台一万八千丈，对此欲倒东南倾。"
                }, { "name": "3", "value": "我欲因之梦吴越，一夜飞渡镜湖月。湖月照我影，送我至剡溪。" }, {
                    "name": "4"
                    , "value": " 谢公宿外今尚在，渌水荡漾清猿啼。脚著谢公屐，身登青云梯。"
                }, { "name": "5", "value": "半壁见海日，空中闻天鸡。千岩万转路不定，迷花倚石忽已暝。" }, {
                    "name": "6", "value"
                        : "熊咆龙吟殷岩泉，栗深林兮惊层巅。云青青兮欲雨，水澹澹兮生烟。"
                }, { "name": "7", "value": "列缺霹雳，丘峦崩摧，洞天石扉，訇然中开。" }, {
                    "name": "8", "value"
                        : "青冥浩荡不见底，日月照耀金银台。霓为衣兮风为马，云之君兮纷纷而来下。"
                }, { "name": "9", "value": "虎鼓瑟兮鸾回车，仙之人兮列如麻。忽魂悸以魄动，恍惊起而长嗟。" }, {
                    "name": "10", "value"
                        : "惟觉时之枕席，失向来之烟霞。世间行乐亦如此，古来万事东流水。"
                }, { "name": "11", "value": "别君去兮何时还？且放白鹿青崖间，须行即骑访名山。" }, {
                    "name": "12", "value"
                        : "安能摧眉折腰事权贵，使我不得开心颜！"
                }]
            },
            methods: {

            }
        }) 
    </script>
</body>

</html>